import React, { Component } from 'react'

/*
    props 验证： 安装 props-types 第三方包, 这个包里有很多内置的校验规则
        校验常见类型： array、bool、func、number、object、string、symbol
        react元素类型： element
        必填项： isRequired
        特定的结构对象： shape({})
*/
import PropTypes from 'prop-types'

// 函数式组件使用prop-types: 组件名.propTypes = {}
function Test({list, pageSize = 10}) {
    return (
        <div>
            {list.map(item => <p key={item}>{item}</p>)}
            {/* 函数参数默认值的方式，在这里直接使用 */}
            {pageSize}   
        </div>
    )
}
Text.propTypes = {
    // list: PropTypes.array    // 校验限定只能是数组，如果不是数组，会有警告报错
    list: PropTypes.array.isRequired    // 设置必传
}
// 指定props默认值
// 函数是组件中：第一种：使用defaultProps， 第二种是函数参数默认值 function Test({pageSize: 10}) {
// Test.defaultProps = {    // 基本不用了
//     pageSize: 10
// }


// 类组件中指定props默认值
class List extends Component {
    static propTypes = {
        pageSize: PropTypes.number
    }
    static defaultProps = {
        pageSize: 10
    }
    render() {
        return (
            <div>{this.props.pageSize}</div>
        )
    }
}
// 第一种： 组件名.defaultProps,   第二种：在类组件内部 使用 静态属性 声明
// List.defaultProps = {
//     pageSize: 10
// }




export default class Test9_com_propTypes extends Component {
  render() {
    return (
      <div>
        {/* <Test list={9} /> */}
        <Test list={[1,2,3]} />
        {/* <Test list={[1,2,3]} pageSize={20} /> */}
        <List />
      </div>
    )
  }
}
